<template>
  <el-table
    ref="gridTable"
    v-loading="listLoading"
    :data="showGridData"
    :size="size"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      v-if="multiple"
      type="selection"
      width="30"
    />
    <el-table-column
      v-for="(item,index) in gridColumns"
      :key="index"
      :prop="item.prop"
      :class-name="item.className || ''"
      :label="item.label"
      :resizable="!!item.resizable"
      :sortable="item.sortable"
      :align="item.align"
      :fixed="item.fixed"
      :type="item.type"
      :show-overflow-tooltip="item.showOverflowTooltip"
      :width="item.width"
      fit
    >
      <template slot-scope="scope">
        <formatter-component
          :format="item.format"
          :options="item.options"
          :row="scope.row"
          :column="item.prop"
          :index="scope.$index"
          @click="onCellClick"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import FormatterComponent from '@/components/FormatterView'
export default {
  name: 'DetailView',
  components: {
    FormatterComponent
  }
}
</script>
